import { Area, Column, Pie } from "@ant-design/charts";
import { Card, Col, Row, Typography } from "antd";

import React from "react";

import "./index.less";

const { Title } = Typography;

const Page47: React.FC = () => {
  const areaData = Array.from({ length: 30 }).map((_, i) => ({
    date: `2024-11-${(i % 30) + 1}`,
    value: Math.round(Math.random() * 1000) + 100,
    type: i % 2 ? "A" : "B",
  }));
  const columnData = Array.from({ length: 12 }).map((_, i) => ({
    month: `${i + 1}月`,
    value: Math.round(Math.random() * 1000),
  }));
  const pieData = [
    { type: "直接", value: 40 },
    { type: "推广", value: 25 },
    { type: "搜索", value: 20 },
    { type: "其他", value: 15 },
  ];

  return (
    <div className="page47-page">
      <Title level={2} className="page-title">
        数据统计与图表分析
      </Title>
      <Row gutter={[16, 16]}>
        <Col xs={24} lg={16}>
          <Card className="chart-card">
            <Area
              data={areaData}
              xField="date"
              yField="value"
              seriesField="type"
              smooth
            />
          </Card>
        </Col>
        <Col xs={24} lg={8}>
          <Card className="chart-card">
            <Pie
              data={pieData}
              angleField="value"
              colorField="type"
              radius={0.8}
            />
          </Card>
        </Col>
      </Row>
      <Row gutter={[16, 16]} style={{ marginTop: 16 }}>
        <Col span={24}>
          <Card className="chart-card">
            <Column data={columnData} xField="month" yField="value" />
          </Card>
        </Col>
      </Row>
    </div>
  );
};

export default Page47;
